<template>
  <div class="header-bar-inner">
    <div class="left-info">
      <img src="https://cdn.jsdelivr.net/gh/iconoir-icons/svg/weather.svg" class="icon weather-icon" alt="weather" />
      <span class="weather">32℃ 多云</span>
    </div>
    <div class="title">夏津县雨污地下管网智能安全监测预警系统</div>
    <div class="right-info">
      <img src="https://cdn.jsdelivr.net/gh/iconoir-icons/svg/time.svg" class="icon time-icon" alt="clock" />
      <span class="datetime">2025/06/08 09:01:02</span>
    </div>
  </div>
</template>

<script setup>
// 可后续用 props 传递天气、时间等
</script>

<style scoped>
.header-bar-inner {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #0a1a2a 60%, #1e3c5a 100%);
  color: #fff;
  font-size: 24px;
  padding: 0 60px;
  letter-spacing: 2px;
  box-shadow: 0 0 24px 4px #00eaff66, 0 2px 8px #0008;
  border-bottom: 2px solid #00eaff;
  position: relative;
  z-index: 10;
}
.title {
  flex: 1;
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 6px;
  color: #fff;
  text-shadow: 0 0 8px #00eaff, 0 0 2px #fff, 0 2px 8px #1e3c5a;
  filter: brightness(1.2);
  user-select: none;
}
.left-info, .right-info {
  width: 260px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 20px;
  gap: 12px;
}
.right-info {
  justify-content: flex-end;
}
.icon {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 0 6px #00eaff88);
}
.weather-icon {
  margin-right: 6px;
}
.time-icon {
  margin-right: 6px;
}
.weather, .datetime {
  font-weight: bold;
  text-shadow: 0 0 4px #00eaff, 0 2px 8px #1e3c5a;
}
</style> 
